<template>
    <div class="app-header">
        <div class="left">
            <div class="app-logo" style="--size: 2vw"></div>
            <div class="app-name">laoyu项目归档系统</div>
        </div>
        <div class="right">
            <div class="avatar" style="--avatar-color: #ccc"></div>
        </div>
    </div>
</template>

<script setup></script>

<style scoped lang="less">
.app-header {
    box-sizing: border-box;
    width: 100%;
    height: 4vw;
    padding-left: 2vw;
    padding-right: 10vw;
    box-shadow: 0 0 0.5vw rgba(0, 0, 0, 0.2);
    display: flex;
    position: relative;
    z-index: 99;

    .left, .right {
        flex: 1;
        display: flex;
        align-items: center;
    }

    .left {
        gap: 1vw;

        .app-name {
            font-size: 1.2vw;
            font-weight: 700;
        }
    }

    .right {
        justify-content: flex-end;

        .avatar {
            --size: 2.5vw;
            width: var(--size);
            height: var(--size);
            border: 0.1vw solid var(--avatar-color);
            border-radius: 50%;
            overflow: hidden;

            position: relative;

            &::before, &::after {
                content: '';
                position: absolute;
                border-radius: 50%;
                background-color: var(--avatar-color);
            }

            &::before {
                width: 50%;
                height: 50%;
                top: 10%;
                left: 50%;
                transform: translateX(-50%);
            }

            &::after {
                width: 100%;
                height: 100%;
                top: 65%;
                left: 50%;
                transform: translateX(-50%);
            }
        }
    }
}
</style>